<template>
  <div>
    <el-card class="box-card">
      <div slot="header" class="clearfix">
        <span>商品列表</span>
        <el-button
          style="margin-left: 10px"
          type="primary"
          size="small"
          @click="handleAdd"
          >添加商品</el-button
        >
        <el-form :inline="true" :model="searchform" class="demo-form-inline">
          <el-form-item>
            <el-input
              v-model="searchform.shop"
              placeholder="请输入要搜索的商品"
            ></el-input>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="onSubmit">搜索</el-button>
          </el-form-item>
        </el-form>
      </div>
      <el-table
        :data="
          ShopData.slice((currentPage - 1) * pageSize, pageSize * currentPage)
        "
        border
        style="width: 100%"
      >
        <el-table-column prop="id" label="编号" width="90" align="center">
        </el-table-column>
        <el-table-column
          prop="title"
          label="商品名称"
          width="180"
          align="center"
        >
        </el-table-column>
        <el-table-column prop="desc" label="商品描述"> </el-table-column>
        <el-table-column
          prop="price"
          label="商品单价"
          align="center"
          width="90"
        >
        </el-table-column>
        <el-table-column label="缩略图" align="center">
          <template slot-scope="scope">
            <el-image :src="scope.row.img" style="width: 90px"></el-image
          ></template>
        </el-table-column>
        <el-table-column prop="fav" label="收藏人数" width="90" align="center">
        </el-table-column>
        <el-table-column label="操作">
          <template slot-scope="scope">
            <el-button size="mini" @click="handleEdit(scope.row)"
              >编辑</el-button
            >
            <el-button
              size="mini"
              type="danger"
              @click="handleDelete(scope.row.id)"
              >删除</el-button
            >
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="currentPage"
        :page-sizes="[5, 10, 20, 30]"
        :page-size="pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="ShopData.length"
      >
      </el-pagination>
    </el-card>
    <el-dialog :title="dialogTitle" :visible.sync="dialogVisible" width="30%">
      <el-form
        :label-position="labelPosition"
        label-width="80px"
        :model="shopsform"
      >
        <el-form-item label="商品名称">
          <el-input v-model="shopsform.title"></el-input>
        </el-form-item>
        <el-form-item label="商品描述">
          <el-input v-model="shopsform.desc"></el-input>
        </el-form-item>
        <el-form-item label="商品价格">
          <el-input v-model="shopsform.price"></el-input>
        </el-form-item>
        <el-form-item label="缩略图">
          <el-input v-model="shopsform.img"></el-input>
        </el-form-item>
        <el-form-item label="收藏人数">
          <el-input v-model="shopsform.fav"></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submit">确 定</el-button>
        <el-button @click="dialogVisible = false">取 消</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
export default {
  name: "Shops",
  data() {
    return {
      searchform: {
        shop: "",
      },
      pageSize: 5,
      dialogTitle: "",
      labelPosition: "right",
      dialogVisible: false,
      currentPage: 1,
      shopsform: {
        id: "",
        title: "",
        desc: "",
        price: "",
        img: "",
        fav: "",
      },
      ShopData: [],
    };
  },
  mounted() {
    this.getAllShops();
  },
  methods: {
    // 搜索商品
    onSubmit() {
      if (this.searchform.shop.length > 0) {
        this.$axios
          .get("/shops?title=" + this.searchform.shop)
          .then((res) => {
            if (res.statusText == "OK") {
              this.ShopData = res.data;
            } else {
              console.log("出错了!");
            }
          })
          .catch((err) => {
            console.log(err);
          });
      } else {
        this.$message.error("搜索失败，请输入要搜索的商品!");
        this.getAllShops();
      }
    },
    // 添加商品
    submit() {
      let pattern = /^[\u4E00-\u9FA5A-Za-z0-9_|]+[\u4E00-\u9FA5A-Za-z0-9_|]+$/;
      if (this.shopsform.id > 0) {
        // 触发编辑的请求
        let data = {
          title: this.shopsform.title,
          desc: this.shopsform.desc,
          price: this.shopsform.price,
          fav: this.shopsform.fav,
          img: this.shopsform.img,
        };
        if (!pattern.test(data.title)) {
          this.$message.error("商品名称不能为空!");
          return;
        }
        if (!pattern.test(data.desc)) {
          this.$message.error("商品描述不能为空!");
          return;
        }
        if (!pattern.test(data.price)) {
          this.$message.error("商品单价不能为空!");
          return;
        }
        this.$axios
          .put("/shops/" + this.shopsform.id, data)
          .then((res) => {
            console.log(res);
            if (res.status == 200) {
              this.getAllShops();
              this.dialogVisible = false;
              this.$message.success("修改商品成功!");
            } else {
              this.$message.error("修改商品失败!");
            }
          })
          .catch((err) => {
            console.log(err);
          });
      } else {
        let data = {
          title: this.shopsform.title,
          desc: this.shopsform.desc,
          price: this.shopsform.price,
          img: this.shopsform.img,
          fav: 0,
          isCart: false,
          img2: this.shopsform.img,
          sale: 0,
        };
        if (!pattern.test(data.title)) {
          this.$message.error("商品名称不能为空!");
          return;
        }
        if (!pattern.test(data.desc)) {
          this.$message.error("商品描述不能为空!");
          return;
        }
        if (!pattern.test(data.price)) {
          this.$message.error("商品单价不能为空!");
          return;
        }
        this.$axios
          .post("/shops", data)
          .then((res) => {
            if (res.status == 201) {
              this.getAllShops();
              this.dialogVisible = false;
              this.$message.success("添加商品成功!");
            } else {
              this.$message.error("添加商品失败!");
            }
          })
          .catch((err) => {
            console.log(err);
          });
      }
    },
    // 获取所有商品
    getAllShops() {
      this.$axios
        .get("/shops")
        .then((res) => {
          if (res.status == 200) {
            this.ShopData = res.data;
          } else {
            console.log("获取商品数据失败");
          }
        })
        .catch((err) => {
          console.log(err);
        });
    },
    // 编辑商品
    handleEdit(row) {
      this.dialogTitle = "编辑商品";
      this.shopsform.id = row.id;
      this.shopsform.title = row.title;
      this.shopsform.desc = row.desc;
      this.shopsform.price = row.price;
      this.shopsform.img = row.img;
      this.shopsform.fav = row.fav;
      this.dialogVisible = true;
    },
    // 添加商品
    handleAdd() {
      this.shopsform.id = "";
      this.shopsform.title = "";
      this.shopsform.desc = "";
      this.shopsform.price = "";
      this.shopsform.img = "";
      this.shopsform.fav = 0;
      this.dialogTitle = "添加商品";
      this.dialogVisible = true;
    },
    // 删除商品
    handleDelete(id) {
      this.$axios
        .delete("/shops/" + id)
        .then((res) => {
          if (res.status == 200) {
            this.$message({
              message: "删除成功!",
              type: "success",
            });
            this.getAllShops();
          } else {
            console.log("删除失败");
          }
        })
        .catch((err) => {
          console.log(err);
        });
    },
    handleSizeChange(val) {
      this.pageSize = val;
    },
    handleCurrentChange(val) {
      this.currentPage = val;
    },
  },
};
</script>

<style scoped>
.demo-form-inline {
  float: right;
}
</style>